<template>
    <img src="../../public/image/11.jpg" alt="" class="list_imgs" @click="toggSwitch(prop.item)">
    <div class="list_cen">
        <p class="list_txt">{{ prop.item.name }}</p>
        <div class="btns">
            <span>{{ prop.item.forceValue }}倍算</span>
            <div class="btn" @click="addShop(prop.item, sub)">+</div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { useShopStore } from '../store/shop'

const router = useRouter()
let prop = defineProps(['item', "sub"])
let obj = {
    name: "",
    price: "",
    img: "",
    gId: "",
    storeName: ""
}
// 加入购物车操作 start
const shopStore = useShopStore()
//console.log(JSON.parse(localStorage.getItem("shop")));
function addShop(item, sub) {
    shopStore.shopList.push({
        title: item.title,
        name: item.name,
        price: item.price,
        img: item.img,
        gId: new Date().getTime(),
        count: 1,
        checked: false
    })
}

//加入购物车操作 end
//商品详情传递数据
function toggSwitch(item) {
    sessionStorage.setItem('deilDate', JSON.stringify(item))
    router.push({ path: '/detail' })
}

</script>

<style lang="scss" scoped>
.list_imgs {
    width: 100%;
    height: 406px;
}

.list_cen {
    width: 96%;
    height: auto;
    margin: o auto;

    .list_txt {
        color: #949494;
        font-size: 24px;
    }

    .btns {
        width: 100%;
        height: auto;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;

        span {
            height: 34px;
            font-size: 24px;
            color: #fff;
            background: #d8182d;
            border-radius: 12px;
            display: inline-block;
        }

        .btn {
            width: 49px;
            height: 49px;
            border-radius: 50%;
            background: #d8182d;
            font-size: 40px;
            color: #fff;
            text-align: center;
            line-height: 49px;
        }
    }
}
</style>